<template>
  <main>
    <div class="container">
      <el-button size="large" v-show="store.isBack" @click="resetMap">返回</el-button>
      <header id="totalDataContainer">
        <section
          class="msg-cell"
          v-for="(item, index) in chinaTotalData"
          :key="index">
          <h3>{{ index < 3 ? '+' : '' }} {{ item.num }}</h3>
          <p>{{ item.name }}</p>
        </section>
      </header>
      <div ref="mapContainer" id="mapContainer"></div>
    </div>
    <Aside :items="itemsData"></Aside>
  </main>
</template>
<script lang="ts" setup>
import basecss from '@/assets/base.css'
import { onMounted, reactive, ref, computed, onBeforeUnmount } from 'vue'
import type {  UnwrapNestedRefs } from 'vue'
import type { Children } from '@/assets/types/Disease'
import type { TotalType, CNTotalDate } from '@/assets/types/Typs'
import Aside from '@/views/aside/index.vue'
import { useStore } from '@/stores/store'
import MapEcharts from '@/assets/utils/mapCharts'

/**
 *  定义、声明相关类型和变量
 */
type Region = {
  name: string
  adcode: string
}
type pinDataType =
  | {
      name: string
      value: number[]
    }
  | undefined
const mapContainer = ref<HTMLElement>()
let pinData = reactive(<Array<pinDataType>>[])
let province: UnwrapNestedRefs<Array<Children>> = reactive([])

const itemsData = reactive(<Array<TotalType>>[])
const chinaTotalData: Array<CNTotalDate> = reactive([])

const store = useStore()
const storeState = computed(() => {
  return JSON.parse(JSON.stringify(store.$state))
})
let charts = <MapEcharts|null>{}
/**
 * onMounted事件
 * 1.初始化地图
 */
onMounted(async () => {
  await store.getAllList()
  province = store.diseaseData.diseaseh5Shelf.areaTree[0].children
    await resetMap()
  
  
  chinaTotalData.push(...generateCTData())
})
onBeforeUnmount(()=>{charts=null})
const resetMap = async() => {
  store.region = 'china'
  charts = new MapEcharts(mapContainer)
  charts!.updatePinData(province)
  charts!.clicktoChangemap(itemsData, store)
  itemsData.length = 0
  itemsData.push(...store.getitem!)
  store.isBack = false
}
const generateCTData = () => {
  const data = store.diseaseData.diseaseh5Shelf.chinaTotal
  return [
    { name: '本土确诊', num: data.localConfirmAdd },
    { name: '本土无症状', num: data.localWzzAdd },
    { name: '确诊病例', num: data.confirmAdd },
    { name: '现有本土确诊', num: data.localConfirm },
    { name: '现有本土无症状', num: data.noInfect },
    { name: '现有确诊病例', num: data.nowConfirm },
    { name: '高风险地区', num: data.highRiskAreaNum },
    { name: '中风险地区', num: data.mediumRiskAreaNum },
    { name: '累计死亡', num: data.dead },
  ]
}
</script>
<style lang="less">
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
main {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-wrap: nowrap;
  background-image: url('@/assets/bg.jpg');
  background-size: cover;
  .container {
    position: relative;
    width: 50%;
    height: 100%;
    button {
      position: absolute;
      bottom: 50px;
      left: 50px;
      z-index: 99;
    }
    #totalDataContainer {
      width: 350px;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      .msg-cell {
        padding: 10px;
        margin: 1px;
        width: 30%;
        background-color: rgba(170 141 97 / 50%);
        text-align: center;
        h3 {
          color: #e57631;
          font-weight: bold;
        }
        p {
          font-size: 10px;
        }
        &:last-child {
          h3,
          p {
            color: #4e5a65;
          }
        }
        &:nth-child(1) {
          border-radius: 5px 0 0 0;
        }
        &:nth-child(3) {
          border-radius: 0 5px 0 0;
        }
        &:nth-child(7) {
          border-radius: 0 0 0 5px;
        }
        &:nth-child(9) {
          border-radius: 0 0 5px;
        }
      }
    }
    #mapContainer {
      width: 100%;
      height: 75%;
    }
  }
}
</style>
